<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style type="text/css">
			#egg{
				position: absolute;
				top: 20px;
			}
			#btn{
				position: absolute;
				top: 160px;
				left: 20px;
			}
			#qiang{
				position: absolute;
				top: 0;
				left: 600px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//1.抓元素
				var egg = document.getElementById("egg");
				var btn = document.getElementById("btn");
				var speed = 15;
				//8.声明一个变量解决Bug
				var timer;
				//2.给按钮加点击事件
				btn.onclick = function(){
					//9.进行清除定时器
					clearInterval(timer);
					function run(){
						//3.获取到小鸡原来left值
						var oldLeft = egg.style.left;
						//4.设置新left值
						var newLeft = parseInt(oldLeft) + speed;
						//7.处理来回跑
						if(newLeft == 480 || newLeft == 0){
							speed = speed * -1;
						}
						//5.赋值回去
						egg.style.left = newLeft + 'px';
					}					
					//6.加上定时器
					timer = setInterval(run,50);
				}
			}
		</script>
	</head>
	<body>
		<img src="dan.gif" id="egg" style="left: 0;"/>
		<img src="qiang.jpg" id="qiang"/>
		<button id="btn">点我呀~</button>
	</body>
</html>
